{% extends 'setexambase.html' %}

{% block que %}
   <div style="margin-left: 200px">
     <h5>发布考试</h5>
    <form action="" method="post">
        {% csrf_token %}
        <table>
            <tbody>
                <tr>
                    <td>考试时间段设置</td>
                    <td>
                        <input type="text" id="cxcalendarTime_area" readonly="readonly" name="start_time" placeholder="日期时间区间选择" style="width: 300px">
                    </td>
                    </tr>
                <tr>
                        <td>考试时间(分钟）</td>
                        <td><input type="number" name="limit_time" style="width: 300px"></td>
                </tr>
                <tr>
                    <td>
                        {% if messages %}
        <ul style="list-style: none">
            {% for message in messages %}
                <li style="color: red">{{ message }}</li>
            {% endfor %}

        </ul>
                    {% endif %}
                    </td>
                </tr>
                <tr>
                    <td><input type="submit" value="发布考试"></td>
                </tr>
            </tbody>
        </table>

	<script>
	function selected(){
		console.log('ed')
	}
		$('#cxcalendarTime').calendarTime({
			isInputValue:true,//是否生成隐藏<input type="hidden" name="calendarTime" /> 默认false
			inputName:'calendarTime', //隐藏Input的名称,默认calendarTime
			isMini:false,//是否使用迷你样式，默认true,

			minTheDate:true //最小日期时间是否是当前时间 默认false 优先于minDate
		});//日期时间选择
		$('#cxcalendarTime_date').calendarTime({'type':'date'});//日期选择
		$('#cxcalendarTime_time').calendarTime({'type':'time',minDate:'1970-01-01 09:40',selected:function(){
			selected()
		}});//时间选择
		$('#cxcalendarTime_area').calendarTime({'isArea':true});//日期时间区间选择
		$('#cxcalendarTime_areadate').calendarTime({'type':'date','isArea':true});//日期区间选择
		$('#cxcalendarTime_areatime').calendarTime({'type':'time','isArea':true});//时间区间选择
	</script>
    </form>
   </div>
{% endblock %}